<template>
    <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="username">
            <el-input type="text" auto-complete="off" v-model="ruleForm2.username" name="username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
            <el-input type="password" v-model="ruleForm2.pass" auto-complete="off" name="password"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="code">
            <el-input type="text" auto-complete="off" v-model="ruleForm2.code" class="code" name="captcha"></el-input>
            <img :src="url" alt="" onclick="this.src='/api/captcha?'+Math.random()" class="code_img">
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
            <el-button @click="resetForm('ruleForm2')">重置</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    import { Message } from 'element-ui';
    export default {
        name: "login",
        data(){
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    // if (this.ruleForm2.checkPass !== '') {
                    //     this.$refs.ruleForm2.validateField('checkPass');
                    // }
                    callback();
                }
            };
            var validateUser = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入用户名！'));
                } else {
                    // if (this.ruleForm2.checkPass !== '') {
                    //     this.$refs.ruleForm2.validateField('checkPass');
                    // }
                    callback();
                }
            };
            var validateCode= (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入验证码！'));
                } else {
                    // if (this.ruleForm2.checkPass !== '') {
                    //     this.$refs.ruleForm2.validateField('checkPass');
                    // }
                    callback();
                }
            };
            return {
                ruleForm2:{
                    pass:'',
                    username:'',
                    code:''
                },
                url:'/api/captcha',
                rules2:{
                    pass:[
                        { validator:validatePass,trigger:'blur'}
                    ],
                    username:[
                        { validator:validateUser,trigger:'blur'}
                    ],
                    code:[
                        { validator:validateCode,trigger:'blur'}
                    ]
                }
            }
        },
        methods:{
            submitForm(formName) {
                this.url='/api/captcha?'+Math.random();
                let that = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        // console.log(this.ruleForm2.code);
                        this.$axios.post('/api/login',{
                            username:this.ruleForm2.username,
                            password:this.ruleForm2.pass,
                            captcha:this.ruleForm2.code
                        }).then(function(res){
                            if(res.data.status==1){
                                Message({message:res.data.message,type:'success'});
                                // that.$router.push({path:'/'});
                            }else {
                                that.$message.error(res.data.message);
                            }
                        }).catch(function(err){
                          console.log(err);
                            this.$message.error(err);
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.url='/api/captcha?'+Math.random();
            }
        }
    }
</script>

<style scoped>
.demo-ruleForm {
  width: 500px;
  margin: 0 auto;
}
.code {
  width: 70%;
}
.code_img {
  display: inline-block;
  float: right;
  height: 40px;
  width: 25%;
  margin-left: 5%;
}
</style>
